<template>
    <div class="app">
        <!-- 顶部 Header 区域 -->
        <div class="header panel panel-default navbar-fixed-top container">
            <div class="panel-body bg-primary text-center">
                <h3>My App. It's beautiful.</h3>
            </div>
        </div>

        <!-- 中部 路由router-view 区域 -->
        <transition class="content">
            <router-view></router-view>
        </transition>

        <!-- 底部 Tabbar(router-link) 区域 -->
        <ul class="nav nav-pills navbar-fixed-bottom bottom container">
            <li class="active">
                <router-link to="/app/HomePage" class="glyphicon glyphicon-th-large"> 首页</router-link>
            </li>
            <li>
                <router-link to="/app/VipPage" class="glyphicon glyphicon-user"><span class="sub"> 会员<em class="sup">91</em></span></router-link>
            </li>
            <li>
                <router-link to="/app/ShopPage" class="glyphicon glyphicon-shopping-cart"><span class="sub"> 购物<em class="sup">9</em></span></router-link>
            </li>
            <li>
                <router-link to="/app/SearchPage" class="glyphicon glyphicon-search"> 搜索</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
$(function() {
    $('li').click(function(){
        $(this).attr("class", "active")
        $('li').not(this).attr("class", "")
    })
})
export default {
    data() {
        return {
      
        }
    }
}
</script>

<style lang="scss" scoped>
.app{
    overflow-x: hidden;
    margin-top: 109px;
    margin-bottom: 60px;
    .bottom {
        height: 60px;
        padding-top: 12px;
        background: rgba(180, 179, 179, 0.466);
        li{
            margin: 0;
            text-align: center;
            width: 25%;
        }
        .sub{
        position: relative; 
        }
        .sup{
            position: absolute;
            top: -7px;
            right: -14px;
            font-size: 10px;
            height: 14px;
            width: 14px;
            line-height: 14px;
            color: white;
            border-radius: 50%;
            background: red;
        }
    }
}

.v-enter{
    opacity: 0;
    transform: translateX(100%);
}
.v-leave-to{
    position: absolute;
    overflow-Y: hidden;
    opacity: 0;
    transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.5s ease;
}
</style>